<template>
  <div class="icon-container">
    <!-- 使用 <img> 标签来插入自定义图标 -->
    <img
      src="./Tips.svg"
      alt="Custom Icon"
      class="custom-icon"
      @mouseover="onHover"
      @mouseleave="onLeave"
      ref="imgRef"
    />

    <!-- 鼠标悬浮时显示的文本框 -->
    <div ref="messageRef" v-if="isHovered" class="tooltip" :style="tooltipStyle">{{ message }}</div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, reactive, onMounted, watch } from 'vue'

const imgRef = ref(null)
const messageRef = ref(null)

const props = defineProps({
  message: {
    type: String,
    default: `快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架`
  }
})

let oldLeft = 0

const getLongestLineLength = (str) => {
  // 将输入的字符串按换行符分割成数组
  const lines = str.split('\n')

  // 初始化一个变量来存储最大长度
  let maxLength = 0

  // 遍历每一行
  for (let line of lines) {
    // 计算当前行的长度
    const lineLength = line.length

    // 更新最大长度
    if (lineLength > maxLength) {
      maxLength = lineLength
    }
  }

  // 返回最长的行的长度
  return maxLength
}

watch(
  () => props.message,
  (newVal, oldVal) => {
    const maxLength = getLongestLineLength(newVal)
    tooltipStyle.width = maxLength * 15 + 'px'
    tooltipStyle['margin-left'] = -maxLength * 15 + 'px'
  }
)

onMounted(() => {
  const maxLength = getLongestLineLength(props.message)
  tooltipStyle.width = maxLength * 15 + 'px'
  tooltipStyle['margin-left'] = -maxLength * 15 + 'px'
})

const tooltipStyle = reactive({
  'margin-top': '-40px',
  'margin-left': '-125px',
  width: '105px'
})

// 控制是否显示文本框的状态
const isHovered = ref(false)

// 鼠标悬浮时改变图标路径并显示文本框
const onHover = () => {
  const originalUrl = imgRef.value.src
  // 使用正则表达式将文件名部分替换为 _hover 版本
  let newUrl = originalUrl.replace(/(Tips)(\.svg)$/, '$1_hover$2')
  imgRef.value.src = newUrl
  isHovered.value = true // 设置为显示文本框
}

// 鼠标离开时恢复默认图标并隐藏文本框
const onLeave = () => {
  let originalUrl = 'http://localhost:5173/src/components/other/Tips.svg'
  // 使用正则表达式将文件名中的 '_hover' 部分替换
  let newUrl = originalUrl.replace(/_hover(\.svg)$/, '$1')
  imgRef.value.src = newUrl
  isHovered.value = false // 设置为隐藏文本框
}

const setToRight = () => {
  const maxLength = getLongestLineLength(props.message)
  tooltipStyle.width = maxLength * 15 + 'px'
  tooltipStyle['margin-left'] = '43px'
}

const setToLeft = () => {
  const maxLength = getLongestLineLength(props.message)
  tooltipStyle.width = maxLength * 15 + 'px'
  tooltipStyle['margin-left'] = -maxLength * 15 + 'px'
}

const setToUpper = (extractNumber) => {
  if (messageRef.value) {
    const height = messageRef.value.offsetHeight
    tooltipStyle['margin-top'] = -height + 'px'
  }
}

const setToBottom = (extractNumber) => {
  if (messageRef.value) {
    const height = messageRef.value.offsetHeight
    tooltipStyle['margin-top'] = '-40px'
  }
}

defineExpose({
  setToRight,
  setToLeft,
  setToUpper,
  setToBottom
})
</script>

<style scoped>
/* 图标容器，用于定位图标和文本框 */
.icon-container {
  position: relative;
  display: inline-block;
}

/* 自定义图标样式 */
.custom-icon {
  width: 43px; /* 根据需要调整图标的大小 */
  height: 43px;
  object-fit: contain; /* 确保图标保持比例 */
}

/* 自定义图标悬浮样式 */
.custom-icon:hover {
  cursor: pointer;
}

/* 文本框的样式 */
.tooltip {
  padding: 5px;
  background-color: rgb(19, 19, 87);
  color: white;
  font-size: 14px;
  opacity: 0.9;
  white-space: pre-wrap; /* 使文本按照换行符 \n 换行 */
}
</style>
